<template>
  <div style="padding-bottom: 160px;position:relative;">
    <div class="step_box">
      <el-steps :active="active" finish-status="success">
        <el-step title="模板信息确认"></el-step>
        <el-step title="销售规格信息"></el-step>
        <el-step title="运费及限购"></el-step>
        <el-step title="展示及分享信息"></el-step>
      </el-steps>
    </div>
    
    <!--基础信息-->
    <el-row v-show="active === 0" class="form_box">
      <el-col :span="20">
        <el-form ref="elForm1" :model="formData" size="default" label-width="120px">
          <div class="from-sub-title">商品类型</div>
          <el-col :span="24">
            <div style="display: flex;margin-bottom: 20px;margin-left: 120px;">
              <div v-if="formData.prodType==1" class="product-type active">
                <div class="main-title">实体商品</div>
                <div class="sub-title">物流发货</div>
                <span role="img" aria-label="check" class="anticon anticon-check checked-icon">
                  <svg viewBox="64 64 896 896" focusable="false" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg>
                </span>
              </div>
              <div v-else class="product-type active" >
                <div class="main-title">虚拟商品</div>
                <div class="sub-title">无需发货</div>
                <span role="img" aria-label="check" class="anticon anticon-check checked-icon">
                  <svg viewBox="64 64 896 896" focusable="false" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg>
                </span>
              </div>
            </div>
          </el-col>
          <div class="from-sub-title">基本信息</div>
          <el-col :span="24" style="padding-left: 40px;">
            <!-- <el-card> -->
              <div class="product_detail_wrap">
                <div class="product_detail_info">
                  <div class="product_detail_img">
                    <img :src="templateDetail.coverImg" />
                  </div>
                  <div class="product_detail_content">
                    <div class="product_detail_name">{{templateDetail.productName}}</div>
                    <div class="product_detail_text_box">
                      <span>商品分类：</span>
                      <div class="product_detail_text">{{templateDetail.typeList?.join(' ')}}</div>
                    </div>
                    <div class="product_detail_text_box">
                      <span>商品简述：</span>
                      <div class="product_detail_text">{{templateDetail.intro}}</div>
                    </div>
                    <div class="product_detail_text_box">
                      <span>计量单位：</span>
                      <div class="product_detail_text">{{templateDetail.unitName}}</div>
                    </div>
                  </div>
                  
                </div>
                <div style="margin: 20px 0;">
                  <el-button size="default" type="primary" style="margin-right: 10px" plain @click="handleDetail">查看商品详情</el-button>
                  <el-button size="default" type="primary" plain @click="handleBanner">查看轮播图</el-button>
                </div>
                <div style="color:#999;">如需编辑请通过菜单“商品管理-商品模板”进行编辑</div>
              </div>
            <!-- </el-card> -->
          </el-col>
        </el-form>
      </el-col>
    </el-row>
    
    <!--规格信息-->
    <el-row v-show="active === 1" class="form_box">
      <el-col :span="20">
        <div class="from-sub-title">销售信息</div>
      </el-col>
      <el-col :span="20">
        <el-form-item label="批量设置" size="default">
          <el-select v-model="skuPriceType" style="width: 120px;margin-right: 8px;" size="default">
            <el-option label="售价" value="price0" />
            <el-option label="划线价" value="linePrice" />
            <el-option label="黑卡价" value="price3" />
            <el-option label="红卡价" value="price2" />
            <el-option label="蓝卡价" value="price1" />
            <el-option label="积分最多可抵扣金额" value="integralFree" />
            <el-option label="成本价" value="costPrice" />
          </el-select>
          <el-input-number v-model="skuPriceValue" :precision="2" placeholder="请输入价格" :step="0.1" :min="0" size="default" style="width: 200px;margin-right: 8px;"></el-input-number>
          <el-button type="primary" size="default" plain @click="setAllSkuPrice">批量应用</el-button>
        </el-form-item>
        <el-form-item label="销售状态批量设置" size="default">
          <el-button type="primary" size="default" plain style="margin:0 8px;" @click="setAllSkuStatus(1)">全部在售</el-button>
          <el-button type="primary" size="default" plain style="margin-right: 8px;" @click="setAllSkuStatus(2)">全部禁用</el-button>
        </el-form-item>
      </el-col>

      <el-col :span="20" v-if="skuList.length">
        <el-table :data="skuList" :max-height="400" size="default">
          <el-table-column fixed label="销售状态" min-width="80">
            <template #default="{ row,$index }">
              <div @click="skuStatus($index)" style="cursor: pointer;">
                <span class="status-circle" :class="{
                  greenStatus:row.status==1,
                  grayStatus:row.status!=1,
                  }"></span>
                <span>{{ row.status==1?'在售':'禁售' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed label="SKU信息" min-width="220">
            <template #default="{ row }">
              <div style="display: flex;position: relative;">
                <div class="sku-img-wrap"  style="position: relative;" @click="handleSkuInfo(row)">
                  <img :src="row.img" />
                  <div class="sku-info-icon">
                    <el-icon><MoreFilled /></el-icon>
                  </div>
                </div>
                <div class="sku_item_info">
                  <div class="sku_item_name" :title="templateDetail.productName">
                      {{ templateDetail.productName }}
                  </div>
                  <div class="sku_item_type">{{ row.wholeName }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed label="商品编码" min-width="80">
            <template #default="{ row }">
              {{ row.platId }}
            </template>
          </el-table-column>
          <el-table-column fixed label="售价（元）" min-width="180" required class-name="platId-column">
            <template #default="{ row }">
              <el-input-number v-model="row.vipList[0].price" :precision="2" :step="0.1" :maxlength="10" :min="0" size="default"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="划线价（元）" min-width="180">
            <template #default="{ row }">
              <el-input-number v-model="row.linePrice" :precision="2" :step="0.1" :maxlength="10" :min="0" size="default"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="黑卡价（元）" min-width="180" >
            <template #default="{ row }">
              <el-input-number v-model="row.vipList[3].price" :precision="2" :step="0.1" :maxlength="10" :min="0" size="default"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="红卡价（元）" min-width="180" >
            <template #default="{ row }">
              <el-input-number v-model="row.vipList[2].price" :precision="2" :step="0.1" :maxlength="10" :min="0" size="default"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="蓝卡价（元）" min-width="180">
            <template #default="{ row }">
              <el-input-number v-model="row.vipList[1].price" :precision="2" :step="0.1" :maxlength="10" :min="0" size="default"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="积分最多可抵扣金额（元）" min-width="180">
            <template #default="{ row }">
              <el-input-number v-model="row.integralFree" :precision="2" :step="0.1" :maxlength="10" :min="0" size="default"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="成本价（元）" min-width="180">
            <template #default="{ row }">
              <el-input-number v-model="row.costPrice" :precision="2" :step="0.1" :maxlength="10" :min="0" size="default"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="条形码" min-width="130">
            <template #default="{ row }">
              {{ row.barcode }}
            </template>
          </el-table-column>
          <el-table-column label="重量（kg）" min-width="130">
            <template #default="{ row }">
              {{ row.weight }}
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-button type="primary" size="default" style="margin:10px 0;">重置商品</el-button> -->
      </el-col>
    </el-row>
    <!--运费及限购-->
    <el-row v-show="active === 2" class="form_box">
      <el-col :span="20">
        <el-form ref="elForm2" :model="formData2" size="default" label-width="120px">
          <div class="from-sub-title">运费配置</div>
          <el-col :span="20">
            <el-row>
              <el-col :span="15">
                <el-form-item label="快递运费" prop="logFee">
                  <el-radio  selected>
                    统一运费
                    <el-input-number v-model="formData2.logFee" :precision="2" placeholder="请输入运费" :step="0.1" :min="0" size="default" style="width: 200px;margin-right: 8px;"></el-input-number>
                    元
                  </el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <div class="from-sub-title">购买限制</div>
          <el-col :span="20">
            <el-row>
              <el-col :span="15">
                <el-form-item label="限制开关" prop="limitFlag">
                  <el-radio-group v-model="formData2.limitFlag">
                    <el-radio :value="1">不做限制</el-radio>
                    <el-radio :value="2">按等级限制</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" v-show="formData2.limitFlag==2">
            <el-form-item size="default">
              <el-button type="primary" size="default" @click="setLevelDialog">选择等级限制</el-button>
            </el-form-item>
            <el-form-item label="批量设置" size="default">
              <el-select v-model="skuLimitType" style="width: 120px;margin-right: 8px;" size="default">
                <el-option label="全部等级" value="all" />
                <el-option label="普通会员" :value="0" />
                <el-option label="黑卡会员" :value="3" />
                <el-option label="红卡会员" :value="2" />
                <el-option label="蓝卡会员" :value="1" />
              </el-select>
              <span>限购数量：</span>
              <el-input-number v-model="skuLimitValue" placeholder="请输入限购数量" :min="0" size="default" style="width: 200px;margin-right: 8px;"></el-input-number>
              <el-button type="primary" size="default" plain @click="setAllSkuLimitNum">批量应用</el-button>
            </el-form-item>
            <el-table  v-if="skuList.length" :data="skuList" :max-height="400" size="default">
              <el-table-column fixed label="销售状态" min-width="80">
                <template #default="{ row,$index }">
                  <div @click="skuStatus($index)" style="cursor: pointer;">
                    <span class="status-circle" :class="{
                      greenStatus:row.status==1,
                      grayStatus:row.status!=1,
                      }"></span>
                    <span>{{ row.status==1?'在售':'禁售' }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed label="SKU信息" min-width="220">
                <template #default="{ row }">
                  <div style="display: flex;position: relative;">
                    <div class="sku-img-wrap"  style="position: relative;" @click="handleSkuInfo(row)">
                      <img :src="row.img" />
                      <div class="sku-info-icon">
                        <el-icon><MoreFilled /></el-icon>
                      </div>
                    </div>
                    <div class="sku_item_info">
                      <div class="sku_item_name" :title="templateDetail.productName">
                          {{ templateDetail.productName }}
                      </div>
                      <div class="sku_item_type">{{ row.wholeName }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed label="商品编码" min-width="80">
                <template #default="{ row }">
                  {{ row.platId }}
                </template>
              </el-table-column>
              <el-table-column label="普通会员" min-width="180" v-if="multipleSelection.filter(item=>item.id==1).length>0">
                <template #default="{ row }">
                  限购数量
                  <el-input-number v-model="row.vipList[0].limitNum" :maxlength="10" :min="0" size="default"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="黑卡会员" min-width="180" v-if="multipleSelection.filter(item=>item.id==4).length>0">
                <template #default="{ row }">
                  限购数量
                  <el-input-number v-model="row.vipList[3].limitNum" :maxlength="10" :min="0" size="default"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="红卡会员" min-width="180" v-if="multipleSelection.filter(item=>item.id==3).length>0">
                <template #default="{ row }">
                  限购数量
                  <el-input-number v-model="row.vipList[2].limitNum" :maxlength="10" :min="0" size="default"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="蓝卡会员" min-width="180" v-if="multipleSelection.filter(item=>item.id==2).length>0">
                <template #default="{ row }">
                  限购数量
                  <el-input-number v-model="row.vipList[1].limitNum" :maxlength="10" :min="0" size="default"></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
    <!--展示及分享信息-->
    <el-row v-show="active === 3" class="form_box">
      <el-col :span="20">
        <el-form ref="elForm2" :model="formData3" size="default" label-width="120px">
          <div class="from-sub-title">展示配置</div>
          <el-col :span="20">
            <el-row>
              <el-col :span="15">
                <el-form-item label="虚拟销量基数" prop="logFee">
                  <el-input-number v-model="formData3.saleNum" placeholder="请输入运费" :step="1" :min="0" :max="100000000" size="default" style="width: 200px;margin-right: 8px;"></el-input-number>
                </el-form-item>
                <el-form-item label="展示排序" prop="logFee">
                  <el-input-number v-model="formData3.sortNum" placeholder="请输入" :step="1" :min="0" size="default" style="width: 200px;margin-right: 8px;"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <div class="from-sub-title">A商城分享配置</div>
          <el-col :span="24">
            <el-row>
              <el-col :span="8">
                <el-form-item label="分享标题" prop="shareTitleOne">
                  <el-input v-model="formData3.shareTitleOne" placeholder="请输入分享标题" size="default" ></el-input>
                </el-form-item>
                <el-form-item label="分享描述" prop="shareDescOne">
                  <el-input v-model="formData3.shareDescOne" placeholder="请输入分享描述" size="default" ></el-input>
                </el-form-item>
                <el-form-item label="分享图标" prop="shareLogoTypeOne">
                  <el-radio-group v-model="formData3.shareLogoTypeOne" @change="shareLogoTypeOneChange">
                    <el-radio :value="1">使用商品主图</el-radio>
                    <el-radio :value="2">使用自定义图片</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item >
                  <ImageUpload
                    v-model="formData3.shareLogoOne"
                    :isShowTip="false"
                    :limit="1"
                    listType="picture-card"
                  >
                  </ImageUpload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <div class="flex" style="margin-left: 20px;">
                  <div style="width: 350px; border: 1px solid rgb(204, 204, 204); padding: 10px; margin-bottom: 10px; margin-right: 10px;">
                    <div class="text-center">微信朋友圈（预览）</div>
                    <img src="" alt="" style="width: 330px;"/>
                    <div class="flex-middle" style="width: 100%; background-color: rgb(246, 246, 246); padding: 4px;">
                      <img  class="border-radius" :src="formData3.shareLogoOne" style="object-fit:contain;width: 50px; height: 50px;"/>
                      <div class="two-row-ellipsis" style="line-height: 14px;">{{ formData3.shareTitleOne }}</div>
                    </div>
                  </div>
                  <div class="flex-column  flex-between" style="width: 350px; border: 1px solid rgb(204, 204, 204); padding: 10px; margin-bottom: 10px; background-color: rgb(246, 246, 246);">
                    <div class="text-center">微信分享（预览）</div>
                    <div style="width: 100%; background-color: rgb(255, 255, 255); padding: 10px;">
                      <div class="two-row-ellipsis" style="line-height: 16px; font-size: 16px; margin-bottom: 6px;">{{ formData3.shareTitleOne }}</div>
                      <div class="flex-between" style="line-height: 14px; font-size: 14px;">
                        <div class="three-row-ellipsis" style="max-width: 260px; max-height: 40px;">{{ formData3.shareDescOne }}</div>
                        <div>
                          <img :src="formData3.shareLogoOne" class="border-radius" style="object-fit:contain;width: 50px; height: 50px;"/>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="width: 220px; margin-left: 10px; border: 1px solid rgb(204, 204, 204); padding: 20px; margin-bottom: 10px; background-color: rgb(246, 246, 246);">
                    <div class="text-center">分享海报（预览）</div>
                    <div class="bgcolorFFF">
                      <div>
                        <img class="border-radius" :src="formData3.shareLogoOne" style="object-fit:contain;width: 180px; height: 180px;"/>
                      </div>
                      <div style="width: 100%; background-color: rgb(255, 255, 255); padding: 0px 10px;">
                        <div class="two-row-ellipsis padding10-0" style="line-height: 16px; font-size: 14px; margin-bottom: 6px;">{{ formData3.shareTitleOne }}</div>
                        <div class="flex-between" style="line-height: 12px; font-size: 12px;">
                          <div class="flex" style="max-width: 110px; height: 50px; align-items: flex-end;">
                            <div class="ellipsis">{{ formData3.shareDescOne }}</div>
                          </div>
                          <img class="back-gray" alt="" src="https://study-centre.oss-cn-hangzhou.aliyuncs.com/summer-shop%2F20250702101741%2Fshare-qrcode.png" style="object-fit:contain;width: 60px; height: 60px;"/>
                        </div>
                      </div>
                    </div>
                  </div>


                  
                </div>

              </el-col>
            </el-row>
          </el-col>
          <div class="from-sub-title">B商城分享配置</div>
          <el-col :span="24">
            <el-row>
              <el-col :span="16">
                <el-form-item label="分享标题" prop="shareTitleTwo">
                  <el-input v-model="formData3.shareTitleTwo" placeholder="请输入分享标题" size="default" ></el-input>
                </el-form-item>
                <el-form-item label="分享描述" prop="shareDescTwo">
                  <el-input v-model="formData3.shareDescTwo" placeholder="请输入分享描述" size="default" ></el-input>
                </el-form-item>
                <el-form-item label="分享图标" prop="shareLogoTypeTwo">
                  <el-radio-group v-model="formData3.shareLogoTypeTwo" @change="shareLogoTypeTwoChange">
                    <el-radio :value="1">推广图文</el-radio>
                    <el-radio :value="2">生成海报</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-show="formData3.shareLogoTypeTwo==1">
                  <Editor v-model="formData3.shareLogoTwo" placeholder="请输入内容" type="url" height="400"></Editor>
                </el-form-item>
                <el-form-item v-show="formData3.shareLogoTypeTwo==2">
                  <ImageUpload
                    v-model="formData3.shareLogoTwo"
                    :isShowTip="false"
                    :limit="1"
                    listType="picture-card"
                  >
                  </ImageUpload>
                </el-form-item>
              </el-col>
              <el-col :span="16">

              </el-col>
            </el-row>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
    <div class="footer-wrap">
      <el-button size="default" @click="backNext">{{ active===0?'返回':'上一步' }}</el-button>
      <el-button size="default" type="primary" @click="submitForm('1')">{{ active===3?'提交':'保存，下一步' }}</el-button>
      <el-button v-show="active===3" size="default" type="primary" @click="submitForm('2')">提交并上架</el-button>
    </div>
    <!--详情弹窗-->
    <el-dialog v-model="detailVisibile" title="商品详情" width="600">
      <div style="overflow: auto;min-height: 300px;">
        <div v-html="templateDetail.detail"></div>
      </div>
    </el-dialog>
    
    <el-image-viewer
        v-if="bannerVisibile"
        :url-list="srcList"
        show-progress
        :initial-index="0"
        @close="bannerVisibile = false"
      />
      <!--sku详情弹窗-->
    <el-dialog v-model="skuVisibile" title="SKU其他信息" width="500">
      <div class="skuItemInfo_box">
        <div class="skuItemInfo_name" :title="templateDetail.productName">{{ templateDetail.productName }}</div>
        <div class="skuItemInfo_wholeName">{{ skuItemInfo.wholeName }}</div>
        <div class="skuItemInfo_barcode">{{ skuItemInfo.barcode }}</div>
        <div class="skuItemInfo_img">
          <img :src="skuItemInfo.img" alt="">
        </div>

      </div>
    </el-dialog>
    <!--等级限制选择-->
    <el-dialog v-model="levelDialog" title="选择等级限制" width="500">
      <el-table
        size="default"
        ref="multipleTableRef"
        :data="vipDataList"
        row-key="id"
        style="width: 100%"
       >
        <el-table-column type="selection" width="55" />
        <el-table-column type="name" label="会员等级" >
          <template #default="{ row,$index }">
            <span>{{row.name}}{{ $index>0?'会员':'' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="levelDialog = false" size="default">取消</el-button>
          <el-button type="primary" @click="handleSelectionOk" size="default">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <SelectCategory :dialogVisible="dialogVisible" :idsList="formData.typeIdList" @onOk="onOk" @onClose="dialogVisible = false"></SelectCategory>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import SelectCategory from '@/components/SelectCategory'
import { getSpecId,saveGoods,getClassifyList,getTemplateDetail,getGoodsInfo,vipList } from "@/api/goods";
import Editor from "@/components/Editor";
import useTagsViewStore from '@/store/modules/tagsView'
import router from '@/router'

const { proxy } = getCurrentInstance();
// 状态管理
const dialogVisible = ref(false)
const skuVisibile = ref(false)
const specList = ref([])
const id = proxy.$route.query.id
const templateId = proxy.$route.query.templateId
const templateDetail = ref({})
const goodsDetail = ref({})
const skuList = ref([])
const skuPriceType = ref('price0')
const skuPriceValue = ref(0)
const skuLimitType = ref('all')
const skuLimitValue = ref(0)
const active = ref(0)
const formData = ref({
  prodType: 1,
  productName: undefined,
  platId:undefined,
  intro: undefined,
  unitName: undefined,
  typeIdList: [],
})
const imgList = ref('')// 商品图片
const srcList = ref([])
const detail = ref('')// 富文本
const levelDialog = ref(false)
const levelValue = ref('')
const multipleTableRef = ref(null)
const multipleSelection = ref([])

const formData2 = reactive({
  limitFlag: 1,
  logFee: 0,
})
let formData3 = ref({
  saleNum: 0,
  sortNum: 0,
  shareTitleOne:'',
  shareDescOne:'',
  shareLogoTypeOne:1,
  shareLogoOne:'',
  shareTitleTwo:'',
  shareDescTwo:'',
  shareLogoTypeTwo:1,
  shareLogoTwo:'',
})
if (templateId) {
  getTemplateDetail({ id:templateId }).then(res => {
    let data =res.data || {}
    templateDetail.value = data
    srcList.value = data.imgList || []
    let skuarr =  data.skuList || []
    skuarr.map(item=>{
      item.status =1 
      item.price = 0
      item.costPrice = 0
      item.integralFree = 0
      item.linePrice = 0
      item.templateSkuId = item.id
      item.id = null
      item.vipList=[
      {
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price":0,
					"skuId": null,
					"vipId": 1
				},
				{
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price": null,
					"skuId": null,
					"vipId": 2
				},
				{
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price": null,
					"skuId": null,
					"vipId": 3
				},
				{
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price": null,
					"skuId": null,
					"vipId": 4
				}
      ]
    })
    skuList.value = skuarr
    specList.value = data.specList
    formData3.value.shareLogoOne = data.coverImg
    console.log('skuList',skuList)
  })
}
if (id) {
  getGoodsInfo({ id:id }).then(res => {
    let data =res.data || {}
    goodsDetail.value = data
    templateDetail.value = data.template
    let templateSkuList = data.template.skuList
    console.log(11111,data,templateSkuList)
    srcList.value = data.template.imgList || []
    let skuarr =  JSON.parse(JSON.stringify(data.skuList))
    skuarr.map((item,i)=>{
      item.img= templateSkuList[i].img
      item.wholeName=templateSkuList[i].wholeName
      item.platId=templateSkuList[i].platId
      item.barcode=templateSkuList[i].barcode
      item.weight=templateSkuList[i].weight
      if(item.vipList){
        item.vipList.forEach(item2=>{
          if(item2.limitFlag==1){
            multipleSelection.value.push({
              id:item2.vipId
            })
          }
        })
      }
    })
    
    formData2.logFee = data.logFee
    formData2.limitFlag = data.limitFlag
    formData3.value = {
      saleNum: data.saleNum,
      sortNum: data.sortNum,
      shareTitleOne:data.shareTitleOne,
      shareDescOne:data.shareDescOne,
      shareLogoTypeOne:data.shareLogoTypeOne,
      shareLogoOne:data.shareLogoOne,
      shareTitleTwo:data.shareTitleTwo,
      shareDescTwo:data.shareDescTwo,
      shareLogoTypeTwo:data.shareLogoTypeTwo,
      shareLogoTwo:data.shareLogoTwo,
    }
    skuList.value = skuarr
    // specList.value = data.specList
    // formData3.shareLogoOne = data.coverImg
    
    console.log('skuarr',skuarr)
  })
}
async function setAllSkuId(skuarr){
  const results = []; // 用于存储结果的数组
  for (let i = 0; i < skuarr.length; i++) {
    let res = await getSpecId()
    results.push({
      ...skuarr[i],
      id:res.data,
      vipList:[
      {
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price":0,
					"skuId": res.data,
					"vipId": 1
				},
				{
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price": 0,
					"skuId": res.data,
					"vipId": 2
				},
				{
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price": 0,
					"skuId": res.data,
					"vipId": 3
				},
				{
					"delFlag": 0,
					"id": null,
					"limitFlag": 2,
					"limitNum": 0,
					"price": 0,
					"skuId": res.data,
					"vipId": 4
				}
      ]
    }); // 将结果推入数组
  }
  console.log('All results:', results); // 输出所有结果
  return results; // 返回结果数组
}

// DOM引用
const elForm1 = ref(null)
const elForm2 = ref(null)

// 生命周期钩子
onMounted(() => {
if (!id) {
}
})
// 方法
const submitForm = (status) => {
  if(active.value==0){
    elForm1.value.validate(valid => {
      if (!valid) return
      // TODO 提交表单
      next()
    })
  }else if(active.value==1){// 第二步
    let platIdFlag = false
    skuList.value.forEach(item=>{
      if(!item.vipList[0].price){
        platIdFlag = true
      }
    })
    if(platIdFlag){
      proxy.$modal.msgError(`请输入售价!`)
      return
    }
    next()
  }else if(active.value==2){
    next()
  }else if(active.value==3){
    submit(status)
  }
  
}
const submit = (status)=>{
  console.log(1234,imgList.value,detail)
  let skuArr = []// 解析sku
  skuList.value.forEach(item=>{
    skuArr.push({
      costPrice:item.costPrice,
      delFlag:item.delFlag,
      id:item.id,
      templateSkuId:item.templateSkuId,
      linePrice:item.linePrice,
      status:item.status,
      vipList:item.vipList,
      integralFree:item.integralFree,
    })
  })
  let params = {
    ...formData2,
    ...formData3.value,
    skuList:skuArr,
    status,
    templateId:templateId,
    // typeIdList:[123],// 商品分类id集合
  }
  console.log(11,id)
  if(id){
    params.id = id
    params.templateId = templateDetail.value.id
  }
  saveGoods(params).then(res=>{
    console.log(123,res)
    if(res.code==200){
      proxy.$modal.msgSuccess("保存成功")
      useTagsViewStore().delView(router.currentRoute.value)
      router.go(-1)
    }
  })
}
// 查询参数
const allClassList = ref([])
// 获取所有商品分类
const getAllList = () => {
  const data  = {
    current: 1,
    size: 999,
    type:'1',// 1-商品分类
  }
  getClassifyList(data)
  .then(res => {
    let arr = res.data.records
    allClassList.value = arr
  })
  .finally(() => {
  })
}
getAllList()
const backNext = () => {
  if(active.value-1<0){
    useTagsViewStore().delView(router.currentRoute.value)
    router.go(-1)
  }
  active.value = active.value-1>0?active.value-1:0
}
const next = () => {
  if (active.value++ > 2) active.value = 0
}

const onOpen = () => {
  dialogVisible.value = true
}

const onOk = (data) => {
  console.log(112, data)
  formData.value.typeIdList = data.value
  dialogVisible.value = false
}

//set  skuStatus
const skuStatus = (index) => {
  const newskuList = JSON.parse(JSON.stringify(skuList.value))
  newskuList.map((item,i)=>{
    if(index==i){
      item.status = item.status==1?2:1
    }
  })
  skuList.value = newskuList
  console.log(11,newskuList)
}


const dialogImageUrl = ref('')
const detailVisibile = ref(false)
const bannerVisibile = ref(false)
const handleBanner = () => {
  bannerVisibile.value = true
}
const handleDetail = () => {
  detailVisibile.value = true
}
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  // dialogVisible.value = true
}
const skuItemInfo = ref({})
const handleSkuInfo = (item)=>{
  skuVisibile.value = true
  skuItemInfo.value = item
}

const setAllSkuPrice = ()=>{
  const newskuList = JSON.parse(JSON.stringify(skuList.value))
  newskuList.map(item=>{
    if(skuPriceType.value.includes('price')){
      if(skuPriceType.value =='price0'){
        item.vipList[0].price = skuPriceValue.value
      }
      if(skuPriceType.value =='price1'){
        item.vipList[1].price = skuPriceValue.value
      }
      if(skuPriceType.value =='price2'){
        item.vipList[2].price = skuPriceValue.value
      }
      if(skuPriceType.value =='price3'){
        item.vipList[3].price = skuPriceValue.value
      }
    }else{
      item[skuPriceType.value] = skuPriceValue.value
    }
  })
  skuList.value = newskuList
  console.log(skuPriceType.value,skuPriceValue.value,newskuList)
}
const setAllSkuStatus = (value)=>{
  // console.log(skuPriceType.value,skuPriceValue.value)
  const newskuList = JSON.parse(JSON.stringify(skuList.value))
  newskuList.map(item=>{
    item.status = value
  })
  skuList.value = newskuList
}
const shareLogoTypeOneChange = (val)=>{
  if(val==1){
    formData3.value.shareLogoOne = templateDetail.coverImg
  }else{
    formData3.value.shareLogoOne = ''
  }
}
const shareLogoTypeTwoChange = (val)=>{
  if(val==1){
    formData3.value.shareLogoTwo = ''
  }else{
    formData3.value.shareLogoTwo = ''
  }
}
const vipDataList = ref([])
const getVipList = ()=>{
  vipList().then(res=>{
    console.log(123,res)
    vipDataList.value = res.data || []
  })
}
getVipList()
const toggleSelection = (rows, ignoreSelectable) => {
  console.log(11,multipleTableRef.value)
  rows.forEach((row) => {
    multipleTableRef.value.toggleRowSelection(row,true)
  })
  
}
const setLevelDialog = ()=>{
  levelDialog.value = true
  console.log(3344,multipleSelection.value)
  toggleSelection(multipleSelection.value)
}
const handleSelectionOk=()=> {
  let arr = multipleTableRef.value.getSelectionRows()
  multipleSelection.value = arr
  console.log(12,multipleSelection.value)
  levelDialog.value = false
  let ids = []
  arr.forEach(item=>{
    ids.push(item.id)
  })
  const newskuList = JSON.parse(JSON.stringify(skuList.value))
  newskuList.map(item=>{
    if(item.vipList){
      item.vipList.map(item2=>{
        if(ids.includes(item2.id)){
          item2.limitFlag = 1
        }else{
          item2.limitFlag = 2
        }
      })
    }
  })
  skuList.value = newskuList
}

const setAllSkuLimitNum = ()=>{
  const newskuList = JSON.parse(JSON.stringify(skuList.value))
  newskuList.map(item=>{
    item.vipList.map((item2,i2)=>{
      if(skuLimitType.value == 'all'){// 设置全部
          item2.limitNum = skuLimitValue.value
      }else{
        if(skuLimitType.value ==i2){
          item2.limitNum = skuLimitValue.value
        }
      }
    })
  })
  skuList.value = newskuList
  console.log(skuPriceType.value,skuPriceValue.value,newskuList)
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-upload--picture-card{
//   width:44px;
//   height:44px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
:deep(.sku-img-wrap) {
  cursor: pointer;
  .el-upload--picture-card,.el-upload-list--picture-card .el-upload-list__item-actions,.el-upload-list--picture-card .el-upload-list__item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
  }
  img{
    width: 44px;
    height: 44px;
    object-fit: contain;
    cursor: pointer;
  }
}
:deep(.el-step__title){
    font-size: 14px;
  }
  :deep(.sku-img-wrap .el-upload-list--picture-card .el-upload-list__item-actions span+span){
    margin-left:4px;
  }
  :deep(.sku-img-wrap .el-upload-list__item-actions .el-icon){
  font-size: 14px;
}
:deep(th.platId-column .cell:before) {
    color: var(--el-color-danger);
    content: "*";
    margin-right: 4px;
}
:deep(.hide .el-upload--picture-card) {
    display: none;
}
:deep{
  .sku-info-icon{
    position: absolute;
    right: 0;
    top: 0;
    color: rgb(255, 255, 255);
    height: 18px;
    line-height: 20px;
    padding: 0px 6px 6px;
    background-color: rgb(74, 137, 240);
    border-radius: 8px;
    font-size: 12px;
  }
}
// el-table_5_column_29 platId-column el-table__cell
.step_box{
  width: 70%;
  margin: 60px auto 0;
  
}
.form_box{
  display: flex;
  justify-content: center;
  padding-top: 38px;
  flex-wrap: wrap;
}
.from-sub-title{
  width:90%;
  padding:2px 0 24px;
  font-size: 16px;
  font-weight: bold;
}
.footer-wrap{
  align-items: center;
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
    bottom: 0;
    box-shadow: 0 -15px 10px -15px #e8e8e8;
    display: flex;
    left: 0;
    min-height: 60px;
    padding: 20px 30px 20px 20px;
    position: fixed;
    width: 100%;
    justify-content: end;
    z-index: 4;
}
.click_a{
  color:#409eff;
}
.product-type{
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  width: 130px;
  margin-right:10px;
  .main-title {
    color: #000;
    font-size: 14px;
  }
  .sub-title {
    font-size: 12px;
    color:#aaa
  }
  .checked-icon {
    position: absolute;
    bottom: 2px;
    color: #fff;
    right: 2px;
    z-index: 11;
    display:none;
  }
}
.product-type.active{
  background-color: #f6f6fd;
  border: 1px solid #4a89f0;
  .main-title {
    color: #4a89f0;
  }
  .checked-icon {
    display: flex;
    z-index: 12;
  }
}
.product-type.active:after {
    border-bottom: 0 solid #0000;
    border-right: 30px solid #4a89f0;
    border-top: 30px solid #0000;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    z-index: 10;
}

// 商品信息
.product_detail_wrap{
  .product_detail_info{
    display: flex;
    .product_detail_img{
      background-color: #f2f2fd;
      border-radius: 4px;
      height: 120px;
      margin-right: 22px;
      width: 120px;
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .product_detail_content{
      .product_detail_name{
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
      }
      .product_detail_text_box{
        display: flex;
        line-height: 26px;
        font-size: 15px;
        span{
          color: #8e8e8e;
        }
        .product_detail_text{

        }
      }
    }
  }
}

// 规格信息
.sku-img-wrap {

}
.sku_item_info{
  flex: 1;
  margin-left: 8px;
  .sku_item_name{
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    white-space: normal !important;
    word-break: break-all;
  }
  .sku_item_type{
    color: #aaa;
  }
}
// sku详情弹窗
.skuItemInfo_box{
  width: 300px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  .skuItemInfo_name{
    color: #000;
    font-size: 16px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .skuItemInfo_wholeName{
    
    margin-top: 10px;
  }
  .skuItemInfo_barcode{
    margin-top: 10px;
  }
  .skuItemInfo_img{
    margin-top: 10px;
    img{
      width: 300px;
      height: 300px;
      object-fit: contain;
    }
  }
}
</style>